<template>
    <div>
        <!--返回-->
        <div>
            <el-page-header @back="back" content="溯源海报审核页">
            </el-page-header>
            <div class="interspaceH"></div>
            <!--步骤条-->
            <el-steps :active="active" finish-status="success">
                <!--创建活动-->
                <el-step title="活动"></el-step>
                <!--分享设置-->
                <el-step title="分享"></el-step>
            </el-steps>
            <div class="interspaceH"></div>
            <!--创建活动-->
            <div v-if="active==0">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="溯源二维码名称" prop="name">
                        <el-input style="width: 220px" v-model="ruleForm.name" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="关联活动" prop="region">
                        <el-select v-model="ruleForm.region1" :disabled="true">
                            <el-option label="大转盘" value="shanghai"></el-option>
                            <el-option label="抽奖" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="ruleForm.region2" :disabled="true">
                            <el-option label="溯源海报" value="shanghai"></el-option>
                            <el-option label="抽奖" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间" required>
                        <el-date-picker :disabled="true"
                                v-model="value2"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="活动标题" prop="name">
                        <el-input style="width: 220px" v-model="ruleForm.name" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="活动内容" prop="name">
                        <el-input style="width: 220px" v-model="ruleForm.name" :disabled="true">插入输入框组件</el-input>
                    </el-form-item>

                    <el-form-item label="海报背景图：" prop="resource1">
                        <el-radio-group v-model="ruleForm.resource1" :disabled="true">
                            <el-radio label="默认海报"></el-radio>
                            <el-radio label="自定义上传"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="活动时间：" prop="resource2">
                        <el-radio-group v-model="ruleForm.resource2" :disabled="true">
                            <el-radio label="显示"></el-radio>
                            <el-radio label="隐藏"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="公司logo：" prop="resource3">
                        <el-radio-group v-model="ruleForm.resource3" :disabled="true">
                            <el-radio label="显示"></el-radio>
                            <el-radio label="隐藏"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="员工名称：" prop="resource4">
                        <el-radio-group v-model="ruleForm.resource4" :disabled="true">
                            <el-radio label="居左"></el-radio>
                            <el-radio label="居中"></el-radio>
                            <el-radio label="居右"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <!--分享设置-->
            <div v-if="active==1">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分享链接封面：" prop="resource1">
                        <el-radio-group v-model="ruleForm.resource1" :disabled="true">
                            <el-radio label="海报封面"></el-radio>
                            <el-radio label="自定义封面"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="活动链接分享标题：" prop="resource2">
                        <el-radio-group v-model="ruleForm.resource2" :disabled="true">
                            <el-radio label="活动标题"></el-radio>
                            <el-radio label="自定义标题"></el-radio>
                        </el-radio-group><br />
                        <el-input style="width: 220px" v-model="ruleForm.name" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="活动描述：" prop="textarea">
                        <el-input
                                style="width: 220px"
                                type="textarea"
                                :rows="2"
                                placeholder="喊好友来参加"
                                v-model="textarea" :disabled="true">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>

            <el-button style="margin-top: 12px;" @click="back" v-if="active==0">返回</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="next" v-if="active==0">下一步</el-button>

            <el-button style="margin-top: 12px;" @click="up" v-if="active==1">上一步</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="close" v-if="active==1">审核未通过</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="save" v-if="active==1">审核通过</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "add",
    data(){
        return{
            //输入框
            textarea: '',
            active: 0,
            ruleForm: {
                name: '',
                region1: '',
                region2: '',
                delivery: false,
                type: [],
                resource1: '',
                resource2: '',
                resource3: '',
                resource4: '',
                textarea: ''
            },
            value2: '',
        }
    },

    methods: {
        close() {
            this.$message({
                message: '审核未通过',
                type: 'error'
            })
            this.back()
        },
        //审核通过
        save() {
            // tableData.status = 1
            this.$message({
                message: '审核通过',
                type: 'success'
            })
            this.back()
        },
        //返回按钮
        back() {
            this.$emit("currentHandler","list")
        },
        //下一步按钮
        next() {
            if (this.active++ > 1) this.active = 0;
        },
        //上一步按钮
        up() {
            if (this.active-- > -1) this.active = 0;
        },
    }
}
</script>

<style scoped>

</style>
